<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!-- 网页使用的语言 -->
<html>
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
	<!-- 导入自己的css -->
	<link rel="stylesheet" type="text/css" href="css/shop.css"/>
    <style type="text/css">
        td,th {
            text-align: center;
        }
		.img {
			width: 100px;
			height: 100px;
			float: left;
		}
        .shopImg img {
            width: 120px;
            height: 40px;
            margin-left: 5px;
        }

        * {
            margin: 0 auto;
            padding: 0;
        }
        #ul1 li{
            list-style: none;
            float: left;
            margin-left: 26px;
            color: #FFFFFF;
            font-size: 13px;
        }
        #ul1 li a{
            color: #ffffff;
            text-decoration: none;
        }
        #ul1 li a:hover{
            color: #FFFF00;
        }
    </style>
    <script>
        function aa1(bb){
            var num1=Number(document.getElementById('result1').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1;
            }
            document.getElementById('result1').value=s;

        }
        function aa2(bb){
            var num1=Number(document.getElementById('result2').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1;
            }
            document.getElementById('result2').value=s;

        }
        function aa3(bb){
            var num1=Number(document.getElementById('result3').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1;
            }
            document.getElementById('result3').value=s;

        }
        function aa4(bb){
            var num1=Number(document.getElementById('result4').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1;
            }
            document.getElementById('result4').value=s;

        }
        function aa5(bb){
            var num1=Number(document.getElementById('result5').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1
            }
            document.getElementById('result5').value=s;

        }
        function aa6(bb){
            var num1=Number(document.getElementById('result6').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1
            }
            document.getElementById('result6').value=s;

        }
        function aa7(bb){
            var num1=Number(document.getElementById('result7').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1
            }
            document.getElementById('result7').value=s;

        }
        function aa8(bb){
            var num1=Number(document.getElementById('result8').value);
            var num2=1;
            switch(bb){
                case'+':s=num1+num2;break;
                case'-':s=num1-num2;break;
            }
            if(s < 1){
                s=1
            }
            document.getElementById('result8').value=s;

        }

        function deleteInformation(id){
            //用户安全提示
            if(confirm("您确定要删除吗？")){
                //访问路径
                location.href="${pageContext.request.contextPath}/delInformationServlet?id="+id;
            }
        }
    </script>

</head>
<body>
<div>
    <%--第一部分--%>
    <div style="width: 100%;height: 34px;background-color: #efefef">
        <div style="text-align:right;font-size: 14px;line-height: 34px;width: 1000px;padding-right: 20px">
            官方网站<a href="https://www.gec.com">https://www.gec.com</a>
            [<a href="http://localhost:8080/${pageContext.request.contextPath}/login.jsp">${user.name}</a>]

            [<a href="http://localhost:8080/${pageContext.request.contextPath}/informationListServlet">我的购物车</a>]
            [<a href="http://localhost:8080/${pageContext.request.contextPath}/orderForm.jsp">我的订单</a>]
            <a href="#">设置为首页</a>
            |<a href="#">加入收藏</a>
        </div>
    </div>

    <%--第二部分--%>
    <div>
        <div style="width: 1000px;margin-top: 20px">
            <table>
                <tr>
                    <td><img src="img/article/logo.gif"></td>
                    <td><img src="img/banner.gif"></td>
                    <td><a href="#" style="border:1px solid #CCCCCC;text-decoration: none;color: #CCCCCC;font-size: 12px">&nbsp;&nbsp;关于我们&nbsp;&nbsp;</a><br><br><a href="#" style="border:1px solid #CCCCCC;text-decoration: none;color: #CCCCCC;font-size: 12px">&nbsp;&nbsp;联系方式&nbsp;&nbsp;</a></td>
                </tr>
            </table>
        </div>
    </div>

    <%--第三部分--%>
    <div style="width: 100%;height: 30px;background-color: #CC3333;margin-top: 20px">
        <div style="width: 1000px;line-height: 30px;text-align: center">
            <ul id="ul1">
                <li><a href="index.do"target="_blank">首页</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0001">护肤</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0002">彩妆</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0003">香氛</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0004">身体护理</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0005">礼盒套装</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0006">母婴专区</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0007">男士专区</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0008">粉底</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0009">粉饼</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0010">睫毛膏</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0011">唇彩</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0012">腮红</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0013">食品保健</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0014">瘦身类</a></li>
                <li><a href="http://localhost:8080/${pageContext.request.contextPath}/index.do?type_code=0015">美容类</a></li>
            </ul>
        </div>
    </div>
</div>


<div style="margin-left: 10px; position: relative">当前位置 >> 我的购物车</div>

<div class="container" style="background: #f4f5f9">

    <table border="1" class="table table-bordered table-hover">
        <tr class="success">
            <th><input type="checkbox">全选</th>
            <th>商品名称</th>
            <th>积分</th>
            <th>疯狂价</th>
            <th>小计</th>
            <th>数量</th>
            <th>操作</th>
        </tr>
        <c:set value="0" var="buySum"/>
        <c:set value="0" var="priceSum"/>
        <c:forEach items="${informations}" var="information" varStatus="s">
            <%--数量求和--%>
            <c:set value="${buySum+information.BUYNUM}" var="buySum"/>
            <%--价格求和--%>
            <c:set value="${priceSum+information.PRICE}" var="priceSum" />

            <tr>
                <td><input type="checkbox"></td>
                <td>
                    <div style="width: 500px; ">
                        <img src="img/article/${information.IMAGE}" class="img"/>
                        <div style="">
                            ${information.TITLE}
                        </div>
                    </div>
                </td>
                <td>${information.integral}</td>
                <td>${String.format("%.2f",information.DISCOUNT*information.PRICE)}</td>
                <td>${String.format("%.2f",information.DISCOUNT*information.PRICE*information.BUYNUM)}</td>
                <td>
                    <input type="button" value="&nbsp;-&nbsp;" onclick="aa${s.count}('-')">&nbsp;<input id="result${s.count}" type="text" style="width: 40px;text-align: center" value="${information.BUYNUM}">&nbsp;<input type="button" value="&nbsp;+&nbsp;" onclick="aa${s.count}('+')">
                </td>
                <td><a class="btn btn-default btn-sm" href="userUpdate.html">移入收藏夹</a><br>
                    <a class="btn btn-default btn-sm" href="javascript:deleteInformation(${information.ID})">删除</a></td>
            </tr>
        </c:forEach>


    </table>
	
    <div style="float: left;">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 25px;margin-left: 5px">
                    共25条记录，共5页
                </span>
            </ul>
        </nav>
		
    </div>
	<div class="shopImg" style="margin-left: 900px;width: 300px;">
		<span style="margin-left: 100px;">数量总计<span id="buySum">&nbsp;${buySum}</span>（件）</span>
		<br>
		<br>
		<span style="margin-left: 40px;">金额总计: ￥<span>${String.format("%.2f",priceSum)}</span>（折后价）</span>
		
		<br>
		<br>
        <a href="${pageContext.request.contextPath}/index.do?type_code=0001"><img src="img/shop.jpg" class="img"/></a>
        <a href="${pageContext.request.contextPath}/informationListServlet2"><img src="img/balance.jpg" class="img"/></a>
		
	</div>
               
</div>
</body>
</html>
